<template>
  <div style="background-color: #ebeef5; height: 100vh; width: 100vw">
    <!-- 搜索框 -->
    <div style="background-color: #ffffff; margin: 5px; padding: 10px">
      <div class="block">
        <span class="demonstration" style="font-weight: 500; color: #606266">收费时间
        </span>
        <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="time" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button style="position: relative; left: 10px" type="primary" icon="el-icon-search"
          @click="searcher()">搜索</el-button>
      </div>
    </div>
    <!-- 展示数据 -->
    <el-descriptions style="background-color: #ffffff; margin: 5px; padding: 10px">
      <el-descriptions-item label="总计收费">
        <font class="resultColor">{{ money }}</font>
      </el-descriptions-item>
      <el-descriptions-item label="滞纳金">
        <font class="resultColor">{{ znj }}</font>
      </el-descriptions-item>
      <el-descriptions-item label="优惠金额">
        <font class="resultColor">{{ yh }}</font>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 表格统计一 -->
    <div style="background-color: #ffffff; margin: 5px; padding: 10px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="常规收费合计" name="first">
          <el-table :data="cg" :header-cell-style="{
          'background-color': '#F8F8F9',
          color: 'gray',
        }" style="width: 500px">
            <el-table-column prop="name" label="收费项名" align="center"></el-table-column>
            <el-table-column prop="latefeeProportion" label="滞纳金" align="center"></el-table-column>
            <el-table-column prop="latefeeDay" label="优惠金额" align="center"></el-table-column>
            <el-table-column prop="univalence" label="总计收费" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格统计二 -->
    <div style="background-color: #ffffff; margin: 5px; padding: 10px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="押金收费合计" name="first">
          <el-table :data="yj" :header-cell-style="{
          'background-color': '#F8F8F9',
          color: 'gray',
        }" style="width: 260px">
            <el-table-column prop="name" label="收费项名" align="center"></el-table-column>
            <el-table-column prop="univalence" label="总计收费" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格统计三 -->
    <div style="background-color: #ffffff; margin: 5px; padding: 10px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="临时收费合计" name="first">
          <el-table :data="ls" :header-cell-style="{
          'background-color': '#F8F8F9',
          color: 'gray',
        }" style="width: 260px">
            <el-table-column prop="name" label="收费项名" align="center"></el-table-column>
            <el-table-column prop="univalence" label="总计收费" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getType } from "@/api/hyj/chargeitem";
export default {
  name: "sftj",
  data() {
    return {
      activeName: "first",
      time: "",
      cg: [],
      ls: [],
      yj: [],
      money: 0,
      znj: 0,
      yh: 0,
    };
  },
  mounted() {
    this.searcher();
  },
  methods: {
    searcher() {
      this.money = 0;
      this.znj = 0;
      this.yh = 0;
      getType(this.time).then((resp) => {
        console.log(resp);
        this.cg = resp.data.cg;
        this.ls = resp.data.ls;
        this.yj = resp.data.yj;
        if (resp.data.cg.length != 0) {
          for (let i = 0; i < resp.data.cg.length; i++) {
            this.money += resp.data.cg[i].univalence;
            this.znj += resp.data.cg[i].latefeeProportion;
            this.yh += resp.data.cg[i].latefeeDay;
          }
        }
        if (resp.data.ls.length != 0) {
          for (let i = 0; i < resp.data.ls.length; i++) {
            this.money += resp.data.ls[i].univalence;
          }
        }
        if (resp.data.yj.length != 0) {
          for (let i = 0; i < resp.data.yj.length; i++) {
            this.money += resp.data.yj[i].univalence;
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.resultColor {
  font-weight: 550;
  color: #1890ff;
}
</style>